<template>
  <div class="my-page clearbox">
    <div class="top_block"></div>
    <van-image
      width="3rem"
      height="3rem"
      fit="cover"
      round
      class="image_head"
      :src="'data:image/png;base64,' + headImage"
    />
    <div class="info">
      <div class="user-info">
        <div class="name">{{ form.nickname }}</div>
        <div class="student-number">学号： {{ form.studyNumber }}</div>
        <div class="points">积分：{{ form.score }}</div>
        <div class="title">称号：{{ form.lvTitle }}</div>
      </div>
    </div>
    <van-cell-group>
      <van-cell title="个人资料" is-link to="/userEdit"></van-cell>
      <van-cell title="修改密码" is-link to="/changePassword"></van-cell>
      <van-cell title="帮助说明" is-link to="/help"></van-cell>
      <van-cell title="版本信息 (v1.0)"></van-cell>
    </van-cell-group>

    <van-button
      class="logout-button"
      type="warning"
      plain
      block
      @click="onLogout"
      >退出登录</van-button
    >
  </div>
</template>
  
<script>
import router from "../../router";
export default {
  name: "MyPage",
  data() {
    return {
      name: "小明",
      studentNumber: "20230001",
      points: 1000,
      title: "一心一意",
      queryInfo: {
        methodName: "mineInfo_getUserInfo",
        data: "",
      },
      imageQueryInfo: {
        methodName: "mineInfo_getHeadImage",
        data: "",
      },
      form: {},
      headImage: "",
    };
  },
  created() {
    this.getUserInfo();
    this.getImageHead();
  },
  methods: {
    onEdit() {
      // 跳转到编辑个人信息页面
      router.push("/userEdit");
    },
    onLogout() {
      // 执行退出登录操作
      window.localStorage.clear();
      router.push("/login");
    },
    async getUserInfo() {
      const { data: res } = await this.$http.post(
        "/app/main",
        JSON.stringify(this.queryInfo),
        {
          headers: {
            "Content-Type": "application/json",
          },
        }
      );
      this.form = JSON.parse(res.data);
    },
    async getImageHead() {
      const { data: res } = await this.$http.post(
        "/app/main",
        JSON.stringify(this.imageQueryInfo),
        {
          headers: {
            "Content-Type": "application/json",
          },
        }
      );
      this.headImage = JSON.parse(res.data).headImage;
    },
  },
};
</script>
  
  <style>
.top_block {
  background-color: rgb(242, 231, 222);
  width: 100vw;
  height: 250px;
  position: relative;
}
.image_head {
  position: absolute;
  top: 130px;
  left: 50px;
}
.info {
  margin-left: 50px;
  margin-top: 120px;
}

.user-info {
  margin-bottom: 8px;
}

.name {
  font-size: 30px;
}

.student-number {
  color: #666;
  font-size: 20px;
}

.points {
  color: #f60;
  font-size: 14px;
  margin-right: 12px;
}

.title {
  color: #666;
  font-size: 20px;
}

.logout-button {
  width: 500px;
  margin: 20px auto;
}
</style>
  